<template>
	<div>
		<div class="step-box">
			<step-bar :active="active"></step-bar>
		</div>

		<div class="out">
			<div class="inner">
				<van-form validate name="组件" input-align="right" error-message-align="right" @submit="onSubmit">
				<div class="box">
				<p class="contrantType">{{$t('message.cglx')}}:{{contractName}}</p>
				<p class="c-title">{{$t('addMsg.dsb')}}:{{$t('addMsg.txxxxx')}}</p>
				<div class="add-title">
					<p>{{$t('message.fwcklb')}}</p>
				</div>

					<van-field readonly clickable required name="picker" :value="showForm.border" :label="$t('message.htzl')" :placeholder="$t('message.htzl')" @click="showPicker = true"
					 :rules="[{  required: true,message: $t('message.xzjnw') }]" />
					<van-popup v-model="showPicker" position="bottom">
						<van-picker show-toolbar :columns="borderList" @confirm="chooseBorder" @cancel="showPicker = false" />
					</van-popup>

					<van-field readonly clickable name="picker" :value="showForm.impExpType" label="" v-if="contractForm.border == 'overseas'" :placeholder="$t('message.p-qxz')"
					 @click="showPicker1 = true" :rules="[{  required: true,message: $t('message.p-qxz') }]" />
					<van-popup v-model="showPicker1" position="bottom">
						<van-picker show-toolbar :columns="typeList" @confirm="chooseType" @cancel="showPicker1 = false" />
					</van-popup>

					<van-field readonly clickable name="picker" required v-if="contractForm.border == 'overseas'" :value="showForm.regionCode" :label="$t('message.gbdq')"
					 :placeholder="$t('message.p-qxz')" @click="showPicker3 = true" :rules="[{  required: true,message:$t('message.p-qxz') }]" />
					<van-popup v-model="showPicker3" position="bottom">
						<van-picker show-toolbar :columns="regionList" @confirm="chooseRegion" @cancel="showPicker3 = false" />
					</van-popup>

					<!-- 省市 -->
					<!-- 境内(省) -->
					<van-field v-if="contractForm.border==='within'" readonly clickable :name="$t('message.qbsf')" :value="showForm.province" :label="$t('message.qbsf')" :placeholder="$t('message.qbsf')" @click="provinceShowPicker = true" right-icon="arrow" :rules="[{ required: true, message: $t('message.xzdq'), trigger: 'onChange' }]"/>
					<!-- 境内(市) -->
					<van-field v-if="contractForm.border==='within' && cityCodeType.length" clickable readonly :name="$t('message.gndq')" :value="showForm.cityCode" label=" " :placeholder="$t('message.p-qxz')" @click="cityCodeShowPicker = true" right-icon="arrow" :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"/>
					<!-- 境内省mask -->
					<van-popup v-model="provinceShowPicker" position="bottom">
					    <van-picker show-toolbar :columns="provinceType" @confirm="provinceConfirm" @cancel="provinceShowPicker = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>
					<!-- 境内市mask -->
					<van-popup v-model="cityCodeShowPicker" position="bottom">
					    <van-picker show-toolbar :columns="cityCodeType" @confirm="cityCodeConfirm" @cancel="cityCodeShowPicker = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>

					<!-- 境外省市 -->
					<!-- 境外(省) -->
					<van-field v-if="contractForm.border==='overseas'" readonly required clickable :name="$t('lackMsg.zfqysd')" :value="showForm.attributionProvince" :label="$t('lackMsg.zfqysd')" :placeholder="$t('lackMsg.p-xzsf')" @click="provinceShowPicker2 = true" right-icon="arrow" :rules="[{ required: true, message: $t('lackMsg.p-xzsf'), trigger: 'onChange' }]"/>
					<!-- 境外(市) -->
					<van-field v-if="contractForm.border==='overseas' && cityCodeType2.length" clickable readonly :name="$t('message.gndq')" :value="showForm.attributionCityCode" label=" " :placeholder="$t('lackMsg.p-xzsq')" @click="cityCodeShowPicker2 = true" right-icon="arrow" :rules="[{ required: true, message: $t('lackMsg.p-xzsq'), trigger: 'onChange' }]"/>
					<!-- 境外省mask -->
					<van-popup v-model="provinceShowPicker2" position="bottom">
					    <van-picker show-toolbar :columns="provinceType2" @confirm="provinceConfirm2" @cancel="provinceShowPicker2 = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>
					<!-- 境外市mask -->
					<van-popup v-model="cityCodeShowPicker2" position="bottom">
					    <van-picker show-toolbar :columns="cityCodeType2" @confirm="cityCodeConfirm2" @cancel="cityCodeShowPicker2 = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>


					</div>
					<div class="box" style="padding-bottom: 38px;">
					<div class="add-title">
						<p>{{$t('message.hyly')}}</p>
					</div>

					<!-- 行业领域一级 -->
					<van-field readonly required clickable name="datetimePicker" :value="showForm.serviceType1" :label="$t('message.hyly')" :placeholder="$t('message.p-qxz')" @click="oneShowPicker = true" right-icon="arrow" :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"/>
					<!-- 行业领域二级 -->
					<van-field v-if="twoType.length" readonly clickable name="datetimePicker" :value="showForm.serviceType2" label=" " :placeholder="$t('message.p-qxz')" @click="twoShowPicker = true" right-icon="arrow" :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"/>
					<!-- 行业领域三级 -->
					<van-field v-if="threeType.length" readonly clickable name="datetimePicker" :value="showForm.serviceType3" label=" " :placeholder="$t('message.p-qxz')" @click="threeShowPicker = true" right-icon="arrow" :rules="[{ required: true, message: $t('message.p-qxz'), trigger: 'onChange' }]"/>
					<!-- 行业领域其他 -->
					<van-field v-if="contractForm.serviceType2&&contractForm.serviceType2.includes('qt')||contractForm.serviceType3&&contractForm.serviceType3.includes('qt')" v-model="contractForm.otherService" maxlength="255" label="" @blur="changeOther" :error-message="otherMessage" :placeholder="$t('message.p-qtfw')" />
					<!-- 行业领域一级mask -->
					<van-popup v-model="oneShowPicker" position="bottom">
					    <van-picker show-toolbar :columns="oneType" @confirm="oneConfirm" @cancel="oneShowPicker = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>

					<!-- 行业领域二级mask -->
					<van-popup v-model="twoShowPicker" position="bottom">
					    <van-picker show-toolbar :columns="twoType" @confirm="twoConfirm" @cancel="twoShowPicker = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>

					<!-- 行业领域三级mask -->
					<van-popup v-model="threeShowPicker" position="bottom">
					    <van-picker show-toolbar :columns="threeType" @confirm="threeConfirm" @cancel="threeShowPicker = false" :confirm-button-text="$t('message.ture')" :cancel-button-text="$t('message.false')"/>
					</van-popup>
					</div>
					<div class="box">
					<div class="add-title">
						<p>{{$t('message.txrxx')}}</p>
					</div>
					<van-field :label="$t('message.tbr')" v-model="contractForm.filledBy" @blur="changeName" :error-message="errMessageName" required :placeholder="$t('message.p-tbr')"/>
					<van-field v-if="siteLang === 'zh-CN'" :label="$t('message.lxdh')" v-model="contractForm.phone" required :placeholder="$t('message.p-phone')" :rules="[{  required: true, pattern:/^1[3|4|5|7|8|9|6][0-9]\d{8}$/,message: $t('message.m10') }]" />
					<van-field v-if="siteLang !== 'zh-CN'" :label="$t('message.lxdh')" v-model="contractForm.phone" :placeholder="$t('message.p-phone')" :rules="[{  required: true, message: $t('message.p-phone') }]" />
					<van-field :label="$t('message.zjhm')" v-model="contractForm.landlineNumber" @blur="changTell" :placeholder="$t('message.p-tell')" :error-message="errMessageTell"/>
					</div>
					<!-- 提交按钮 -->
					<div style="margin:38px 16px 16px 16px;">
						<van-button round block class="save" type="info" native-type="button" @click="save">{{$t('message.zc')}}</van-button>
						<div style="overflow: hidden;margin-top: 10px;padding-bottom: 40px;">
							<van-button class="mybnt" style="float: left;" native-type="button" @click="beforBnt">{{$t('addMsg.syb')}}</van-button>
							<van-button class="mybnt" style="float: right;" round :loading="disabled" :disabled="disabled" native-type="submit">{{$t('addMsg.xyb')}}</van-button>
						</div>
					</div>
				</van-form>
			</div>
		</div>


	</div>
</template>

<script>
	import buried from "@/utils/buried";
	import NavBar from "@/components/NavBar";
	import StepBar from "@/components/StepBar";
	import Cookie from 'js-cookie';
	export default {
		components: {
			NavBar,
			StepBar
		},
		data() {
			return {
				title: "新建统计表",
				active: 2,
				showPicker: false,
				showPicker1: false,
				showPicker3: false,
				provinceShowPicker: false, // 控制境内省mask显示隐藏
				cityCodeShowPicker: false, // 控制境内市mask显示隐藏
				provinceShowPicker2:false,
				cityCodeShowPicker2:false,
				withinShowPicker:false,
				oneShowPicker:false,
				twoShowPicker:false,
				threeShowPicker:false,
				regionList: [], // 国家列表
				provinceType: [], // 境内数据
				provinceType2: [], // 境内数据
				industryPrimitiveDate:[],//行业类别
				borderList:[],
				typeList:[],
				curreny:'',
				disabled:false,
				contractName:'',
				curreyAllList:[],
				showForm:{
					border: '',
					impExpType: '',
					regionCode: '',
					cityCode:'',
					province:'',
					attributionCityCode:'',
					attributionProvince:'',
					landlineNumber:'',
					phone:'',
					filledBy:'',
					serviceType1:'',
					serviceType2:'',
					serviceType3:'',
					otherService:''
				},
				contractForm:{
					border: '',
					impExpType: '',
					regionCode: '',
					cityCode:'',
					province:'',
					attributionCityCode:'',
					attributionProvince:'',
					landlineNumber:'',
					phone:'',
					filledBy:'',
					serviceType1:'',
					serviceType2:'',
					serviceType3:'',
					otherService:''
				},
				errMessageName:'',
				errMessageTell:'',
				otherMessage:''
			}
		},
		computed: {
			siteLang () {
				// 设置默认 cookie
				return Cookie.get('site_lang') || 'zh-CN'
			},
			curreyAllList2(){
				return this.$store.state.exchangeRateList;
			},
			regionList2() {
				return this.$store.state.regionList;
			},
			provinceAllList2(){
				return this.$store.state.provinceAllList;
			},
			serviceList2(){
				return this.$store.state.serviceList;
			},
			cityCodeType () { // 境内市数据
			    const ind = this.provinceType.findIndex(item => item.value === this.contractForm.province);
			    if (ind === -1) return [];
			    const { subordinateProvinceList } = this.provinceType[ind];
			    return subordinateProvinceList.map(item => ({ text: item.province, value: item.code }));
			},
			cityCodeType2 () { // 境外市数据
			    const ind = this.provinceType2.findIndex(item => item.value === this.contractForm.attributionProvince);
			    if (ind === -1) return [];
			    const { subordinateProvinceList } = this.provinceType2[ind];
			    return subordinateProvinceList.map(item => ({ text: item.province, value: item.code }));
			},
			oneType () { // 行业领域一级
			    return this.industryPrimitiveDate.map(item => ({value: item.dictCode, text: item.dictName, serviceList: item.serviceList}));
			},
			twoType () { // 行业领域二级
			    const serviceType1 = this.contractForm.serviceType1;
			    let ind =  this.oneType.findIndex(item => serviceType1 === item.value);
			    if (ind === -1)  return [];
			    const serviceList = this.oneType[ind].serviceList;
			    return serviceList.map(item => ({value: item.dictCode, text: item.dictName, serviceList:item.serviceList}));
			},
			threeType () { // 行业领域三级
			    const serviceType2 = this.contractForm.serviceType2;
			    let ind =  this.twoType.findIndex(item => serviceType2 === item.value);
			    if (ind === -1)  return [];
			    const serviceList = this.twoType[ind].serviceList;
			    return serviceList.map(item => ({value: item.dictCode, text: item.dictName, serviceList:item.serviceList}));
			},
		},
		watch: {
			curreyAllList2:function(val){
				this.curreyAllList = val
			},
			regionList2: function(val) {
				// console.log(val)
				if (val.length !== 0) {
					this.regionList = val.map(item => ({text: item.name, value: item.code}))
				}
			},
			provinceAllList2:function(val){
				if (val.length !== 0) {
					this.provinceType2 = this.provinceType = val.map(item => ({ text: item.province, value: item.code, subordinateProvinceList: item.subordinateProvinceList }));
				}
			},
			serviceList2:function (val){
				this.industryPrimitiveDate = val
				console.log(this.industryPrimitiveDate)
			}
		},
		mounted() {
			buried("M_result_add_new", "M_add_new_contract_fill");
			this.curreyAllList = this.$store.state.exchangeRateList
			this.typeList = this.$store.state.tradeType.map(item => ({text: item.label, value: item.value}))
			this.borderList = this.$store.state.regionType.map(item => ({text: item.label, value: item.value}))
			if (this.$store.state.regionList.length!== 0) {
				this.regionList = this.$store.state.regionList.map(item => ({text: item.name, value: item.code}))
			}
			if (this.$store.state.provinceAllList.length!== 0){
				this.provinceType2 = this.provinceType = this.$store.state.provinceAllList.map(item => ({ text: item.province, value: item.code, subordinateProvinceList: item.subordinateProvinceList }))
			}
			this.industryPrimitiveDate = this.$store.state.serviceList;
			// 成果类型展示
			let type = this.$route.query.contractType
			this.$store.state.addTypeList.forEach(item => {
				if (item.value == type) {
					this.contractName = item.label
				}
			})
			// 是否回显

			if(this.$route.query.id&&this.$route.query.id!==''&&this.$route.query.id!==undefined){
				this.editContract()
			}

		},
		methods: {
			changeOther(){
				if(!this.contractForm.otherService){
					this.otherMessage = this.$t('message.p-qtfw')
					return false
				}else if(!/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(this.contractForm.otherService)) {
					this.otherMessage = this.$t('message.m2')
					return false
				}else{
					this.otherMessage = ''
					return true
				}
			},
			changTell(){
				if(/^(\d{3,4}-)?\d{7,8}$/i.test(this.contractForm.landlineNumber)){
					this.errMessageTell = ''
					return true
				}else if(!this.contractForm.landlineNumber){
					return true
				}else{
					this.errMessageTell = this.$t('message.m11')
					return false
				}
			},
			changeName(){
				if(!this.contractForm.filledBy){
					this.errMessageName = this.$t('message.m12')
					return false
				}else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(this.contractForm.filledBy)) {
					this.errMessageName = this.$t('message.m2')
					return false
				}else if(/^[0-9]*$/.test(this.contractForm.filledBy)){
					this.errMessageName = this.$t('message.m6')
					return false
				}else {
					this.errMessageName = ''
					return true
				}
			},

			chooseBorder(value) {
				this.showForm.border = value.text
				this.contractForm.border = value.value
				if(value.value == 'overseas'){
					this.showForm.cityCode = ''
					this.contractForm.cityCode = ''
					this.showForm.province= ''
					this.contractForm.province= ''
					// alert('境外')
				}else if(value.value == 'within'){
					// alert('境内')
					this.showForm.impExpType = ''
					this.contractForm.impExpType = ''
					this.showForm.regionCode = ''
					this.contractForm.regionCode = ''
					this.showForm.attributionCityCode = ''
					this.contractForm.attributionCityCode = ''
					this.showForm.attributionProvince = ''
					this.contractForm.attributionProvince = ''
				}
				this.showPicker = false
			},
			//选择境内外
			chooseType(value) {
				this.showForm.impExpType = value.text
				this.contractForm.impExpType = value.value
				this.showPicker1 = false
			},
			chooseRegion(value) {
				this.showForm.regionCode = value.text
				this.contractForm.regionCode = value.value
				this.showPicker3 = false
			},
			// 境内确认按钮发生时
			provinceConfirm (data) {
			    this.showForm.province= data.text; // 省级编码
			    this.contractForm.province= data.value // 省级编码
			    this.provinceShowPicker = false;
				this.showForm.cityCode = ''
				this.contractForm.cityCode = ''
			},
			// 境外确认按钮发生时
			provinceConfirm2 (data) {
			    this.showForm.attributionProvince= data.text; // 省级编码
			    this.contractForm.attributionProvince= data.value // 省级编码
			    this.provinceShowPicker2 = false;
				this.showForm.attributionCityCode = ''
				this.contractForm.attributionCityCode = ''
			},
			 // 境内确认按钮发生时
			cityCodeConfirm (data) {
			    this.showForm.cityCode= data.text; // 省级编码
			    this.contractForm.cityCode= data.value // 省级编码
			    this.cityCodeShowPicker = false;
			},
			// 境外确认按钮发生时
			cityCodeConfirm2 (data) {
			    this.showForm.attributionCityCode= data.text; // 省级编码
			    this.contractForm.attributionCityCode= data.value // 省级编码
			    this.cityCodeShowPicker2 = false;
			},
			// 行业领域一级确认按钮发生时
			oneConfirm (data) {
			    this.showForm.serviceType1 = data.text;
			    this.contractForm.serviceType1 = data.value;
			    this.showForm.serviceType2 = "";
			    this.contractForm.serviceType2 = "";
			    this.showForm.serviceType3 = "";
			    this.contractForm.serviceType3 = "";
			    this.showForm.releaseFieldOther = "";
			    this.contractForm.releaseFieldOther = "";
			    this.oneShowPicker = false;
			},
			// 行业领域二级确认按钮发生时
			twoConfirm (data) {
			    this.showForm.serviceType2 = data.text;
			    this.contractForm.serviceType2 = data.value;
			    this.showForm.serviceType3 = "";
			    this.contractForm.serviceType3 = "";
			    this.showForm.releaseFieldOther = "";
			    this.contractForm.releaseFieldOther = "";
			    console.log(data)
			    this.twoShowPicker = false;
			},
			// 行业领域三级确认按钮发生时
			threeConfirm (data) {
			    this.showForm.serviceType3 = data.text;
			    this.contractForm.serviceType3 = data.value;
			    this.showForm.releaseFieldOther = "";
			    this.contractForm.releaseFieldOther = "";
			    this.threeShowPicker = false;
			},
			beforBnt(){
				this.save('alert')
			},
			async editContract(){ //回显
				//编辑暂存回显
				const {data:res} = await this.$axios.get("/api/contract/getContract", {
						id: this.$route.query.id
					})
					console.log(res)
				if(res.code==200){
					console.log("回显成功！")
					this.contractForm = {...res.data};
					this.showForm = {...res.data}
					this.typeList.some(item => {
						if (item.value === this.showForm.impExpType) {
							this.showForm.impExpType = item.text
							return true;
						}
					})
					this.borderList && this.borderList.some(item => {
					    if (item.value === this.showForm.border) {
					        this.showForm.border = item.text;
					        return true;
					    }
					})
					let cityCode = ''; // 市及编码
					let province = ''; // 省级编码
					// 进出口
					// console.log(this.regionList, 'sssssssssssss')
					this.typeList.some(item => {
					    if (this.contractForm.impExpType === item.value) this.showForm.impExpType = item.text;
					    return true;
					})
					this.regionList && this.regionList.forEach(item => {
					    if (item.value == this.contractForm.regionCode) this.showForm.regionCode = item.text;
					})
					// 显示市及编码、省级编码
					province = this.contractForm.provinceName;
					cityCode = this.contractForm.cityName;
					this.showForm.province = province
					this.showForm.cityCode = cityCode
					this.showForm.attributionProvince = res.data.attributionProvinceName
					this.showForm.attributionCityCode = res.data.attributionCityName
					// 显示发布内容
					this.showForm.releaseLevel = this.contractForm.releaseLevelName;
					// 行业领域一级 行业领域二级 行业领域三级
					this.showForm.serviceType1 = res.data.serviceType1Name
					this.showForm.serviceType2 = res.data.serviceType2Name
					this.showForm.serviceType3 = res.data.serviceType3Name
				}else{
					console.log("回显失败")
				}

			},
			beforSubmit(){
				let query = this.$route.query
				console.log(query,'query')
				let obj = {
					...query,
					...this.contractForm
				}
				delete obj.createTime;
				delete obj.modifiedTime;
				delete obj.submitTime;
				delete obj.approvalTime;
				delete obj.approvalStatus
				return obj
			},
			async save(isAlert){
				let params = this.beforSubmit()
				// console.log(params)
				let id = this.$route.query.id
				if(id&&id!==''&&id!==undefined){ //编辑暂存
					const {data:res} =await this.$axios.post("/api/contract/updateContract", params)
					if(res.code == 200){
						if(isAlert !== 'alert'){
							this.$toast(this.$t('message.zccg'))
						}else{
							// 详细资料点击上一步时
							this.$router.push({
								path:'/contractSecond',
								query:{
									id:id,
									state:'edit'
								}
							})
						}
					}else{
						this.$toast(this.$t('message.zcsb'))
					}
				}else{ //新建暂存
					// const {data:res} =await this.$axios.post("/api/contract/contractDraft", params)
					// // console.log(res)
					// if(res.code == 200){
					// 	this.$route.query.id = res.data
					// 	if(isAlert !== 'alert'){
					// 		this.$toast(this.$t('message.zccg'))
					// 	}else{
					// 		// 详细资料点击上一步时
					// 		this.$router.push({
					// 			path:'/contractSecond',
					// 			query:{
					// 				id:this.$route.query.id,
					// 				state:'edit'
					// 			}
					// 		})
					// 	}
					// }else{
					// 	this.$toast(this.$t('message.zcsb'))
					// }
				}
			},
			onSubmit(value) { //下一步
				if(this.contractForm.otherService&&this.contractForm.otherService==''){
					this.otherMessage = this.$t('message.m12')
				}else if(this.contractForm.filledBy==''){
					this.errMessageName = this.$t('message.m12')
				}else{
					this.disabled = true
					let params = this.beforSubmit()
					if(this.$route.query.id){
						console.log("走的编辑提交")
						this.$axios.post("/api/contract/firstRejectSubmit", params).then(res => {
								console.log(res)
								this.disabled = false
								if (res.data.code == 200) {
									this.$toast(this.$t('message.czcg'))
									this.$router.push({
										path:"/succeed",
										query:{
											title:'CONTRACT',
											id:this.$route.query.id
										}
									});
								} else {
									this.disabled = false
									this.$toast(this.$t('lackMsg.czsb'))
								}
							})
							.catch(err => {
								console.log(err);
							});
					}else{
						console.log("走的新建提交")
						this.$axios
							.post("/api/contract/insertContract", params)
							.then(res => {
								console.log(res)
								this.disabled = false
								if (res.data.code == 200) {
									this.$toast(this.$t('message.czcg'))
									this.$router.push({
										path:"/succeed",
										query:{
											title:'CONTRACT',
											id:res.data.data
										}
									});
								} else {
									this.$toast(this.$t('lackMsg.czsb'))
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				}
			}
		}
	};
</script>

<style scoped>
	.out {
		/*width: 96%;*/
		/* background-color: #FFFFFF; */
		margin: 12px auto;
	}
	.box{
		/*width: 98%;*/
		background-color: #FFFFFF;
		margin: 15px;
		border-radius: 8px;
	}
	.inner {
		width: 100%;
	}

	.c-title {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: rgba(33, 33, 33, 1);
		padding: 12px 0px 0 10px;
	}
	.contrantType{
		/*padding: 15px 0 3px 10px;*/
		/*color: #646566;*/
		height: 44px;
		line-height: 44px;
		font-weight: 600;
		border-bottom: 1px solid #e6e9ee;
		margin-bottom: 26px;
		padding-left: 10px;
	}
	.add-title {
		width: 95%;
		border-bottom: 1px solid #E6E9EE;
		color: #212121;
		font-size: 14px;
		padding: 14px 0;
		margin: 6px auto;
		font-weight: 500;
	}

	.add-title p {
		border-left: 3px solid #FFBC3A;
		padding-left: 5px;
		font-weight: 600;
	}
	.save{
		background:linear-gradient(90deg,rgba(254,207,71,1) 0%,rgba(255,188,57,1) 100%) !important;
		border-radius:24px !important;
		border: none !important;
		font-size:16px !important;
	}
	.mybnt{
		background:rgba(255,255,255,1);
		border-radius:22px;
		border:1px solid rgba(204,207,212,1);
		color:rgba(102,102,102,1);
		font-size:17px;
		width: 49%;
	}
	.step-box {
		padding: 15px;
	}
</style>
